$baseUrl: 'https://7a68-zhexu-0gfshy7t6d314f47-1306108795.tcb.qcloud.la/';

.nm-pages-index {
  position: relative;
  width: 100%;
  height: 100vh;
  .canvas {
    display: inline-block !important;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}
.nm-pages-index-over-container {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  .gameover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500rpx;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10rpx;
    text-align: center;
    padding: 50px;
    .title {
      font-size: 40rpx;
    }
    .score {
      font-size: 42rpx;
      margin-top: 30rpx;
    }
    .odl-score {
      font-size: 32rpx;
      margin-top: 20rpx;
    }

    .footer {
      margin-top: 50rpx;
      display: flex;
      justify-content: space-between;
      .btn {
        width: 200rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 10rpx;
        background: linear-gradient(to right, #4CAF50, #A5D6A7);  /* 例如绿色渐变 */  
        // background: linear-gradient(to right, #00B4D8, #90E0EF); /* 从蓝色到浅蓝色 */  
        color: #fff;
        font-size: 30rpx;
      }
    }
  }
}
.nm-pages-index-start-button {
  position: absolute;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  width: calc(147.5rpx * 3);
  height: calc(106rpx * 3);
  z-index: 100;
  .button {
    width: 100%;
    height: 100%;
    background-image: url('#{$baseUrl}images/start-game-2.png');
    background-size: 100% 100%;
  }
  .button-hover-class {
    background-image: url('#{$baseUrl}images/start-game-1.png');
  }
}
.nm-pages-index-tips-container {
  position: absolute;
  z-index: 0;
  right: 10rpx;
  top: 500rpx;
  width: 300rpx;
  padding: 20rpx;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20rpx;
  animation: tips-an 8s infinite forwards;
  
}
@keyframes tips-an {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}